<template>
  <div>
    <!-- <bs-button type="primary" icon="user" @click="visible = true">添加</bs-button> -->
    <bs-button type="primary" icon="user" @click="add">添加</bs-button>
    <bs-dialog title="添加用户" :visible="visible" @cancel="no" @confirm="yes">
      <div>
        <label class="form-label">
          <bs-icon name="user"></bs-icon>
          用户名</label>
        <input type="text" class="form-control">
      </div>
    </bs-dialog>


  </div>
</template>


<script setup>
// setup 语法糖

import { ref } from 'vue';
const visible = ref(false)
function add() {
  visible.value = true;
}
function yes() {
  visible.value = false;
}
function no() {
  visible.value = false;
}
</script>

<script>
/* import { ref } from 'vue';
export default {
  setup() {
    const visible = ref(false)
    function add() {
      visible.value = true;
    }
    function yes() {
      visible.value = false;
    }
    function no() {
      visible.value = false;
    }
    return {
      visible,
      add,
      yes,
      no,
    }
  }
} */
</script>